<template>
  <!-- 积分 -->
  <view class="integral">
    
    <view class="">
      <view class="top">
        <view class="status_bar">
                <!-- 这里是状态栏 -->
        </view>
        <view class="fan" @click="fan()"><image src="../../../static/images/fanhui.png" mode="">积分余额</image></view>    
        <view class="zhong" >
          <view class="">
            10000000
          </view>
          <view class="xiao"> 当前积分</view>
        </view>
        
      </view>
      
      <view class="main">
         <view class="head-nav">
              <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">全部</view>
              <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">收入</view>
              <view :class="navIndex==3?'activite':''" @click="checkIndex(3)">支出</view>
            </view>
            <!-- 内容切换 -->
           <view class="details" v-for="(item,wallet) in details" :key="wallet" v-if="navIndex==1">
             <dl>
               <dd class="name">
                 <text class="way">{{item.way}}</text>
                 <text class="money"  :class="(item.money>0)?'color':''">{{item.money}}</text>
               </dd>
               <dd class="time">{{item.time}}</dd>
             </dl>
           </view>
           <view class="details" v-for="(item,wallet) in details2" :key="wallet" v-if="navIndex==2">
             <dl>
               <dd class="name">
                 <text class="way">{{item.way}}</text>
                 <text class="money"  :class="(item.money>0)?'color':''">{{item.money}}</text>
               </dd>
               <dd class="time">{{item.time}}</dd>
             </dl>
           </view>
           <view class="details" v-for="(item,wallet) in details3" :key="wallet" v-if="navIndex==3">
             <dl>
               <dd class="name">
                 <text class="way">{{item.way}}</text>
                 <text class="money"  :class="(item.money>0)?'color':''">{{item.money}}</text>
               </dd>
               <dd class="time">{{item.time}}</dd>
             </dl>
           </view>
        
        
      </view>
      
      
    </view>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
          navIndex:1,
          details:[
            {
              way:"买机器人",
              money:"899",
              time:"2021.9.13"
            },
            {
              way:"买机器人",
              money:"-199",
              time:"2021.9.13"
            },
            {
              way:"买机器人",
              money:"-199",
              time:"2021.9.13"
            },
          ],
          details2:[
            {
              way:"买机器人222",
              money:"899",
              time:"2021.9.13"
            },
            {
              way:"买机器人222",
              money:"-199",
              time:"2021.9.13"
            },
            {
              way:"买机器人",
              money:"-199",
              time:"2021.9.13"
            },
          ],
          details3:[
            {
              way:"买机器人3333",
              money:"899",
              time:"2021.9.13"
            },
            {
              way:"买机器人",
              money:"-199",
              time:"2021.9.13"
            },
            {
              way:"买机器人",
              money:"-199",
              time:"2021.9.13"
            },
          ]
  		};
  	},
  
  	onLoad() {
  		
  	},
  	mounted() {
     
  	},
  	methods: {	
      fan(){
          uni.navigateBack()
      },
      checkIndex(index){
              this.navIndex =index;
       },
    }
  };
  
</script>

<style lang="scss">
  .integral{
    
    width: 100%;
    
  }
  .status_bar {
          height: var(--status-bar-height);
          width: 100%;
  }
  .top{
    width: 100%;
    height: 500rpx;
    background: linear-gradient(to right, #FA6E3F, #FEAB55);
    .fan{
      padding:0 30rpx;
      image{
      width:20rpx;
      height: 30rpx;
      padding-right: 20rpx;
      vertical-align: middle;
    }
  }
  .zhong{   
      text-align: center;
      // line-height: 400rpx;
      margin-top:150rpx;
      font-size: 42rpx;
      font-weight: bold;
      color: white;
      .xiao{
        font-size: 22rpx;
        margin-top:20rpx;
      }
    }  
  }
  
  .main{
    position: relative;
    bottom:89rpx;
  }
  
   .head-nav{
      width: 660rpx;
      // border:1px solid red;
      margin:0 auto;
      padding-top:20rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: white;
      border-radius: 30rpx 30rpx 0 0;
      view{
        padding-bottom:20rpx;
        
      }
    }
    .activite{
      // font-weight: bold;
      border-bottom: 4rpx solid #CEBD8F;
      padding-bottom:10rpx;
    }
    

  .details{
    border-top:1rpx solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
    dl{
      overflow: hidden;
      padding:30rpx 30rpx;
      dt{
        image{
          width: 80rpx;
          height: 80rpx;
          float: left;
          padding-right:20rpx;
        }
      }
      
      .name{
        overflow: hidden;
        // font-weight: bold;
        font-size: 30rpx;
        .way{
          float: left;
        }
        .money{
          float: right;
          // color: #FA6E3F;
        }
        .color{
          color: #FA6E3F;
        }
      }
      .time{
        margin-top:10rpx;
        font-size: 24rpx;
        color: #C8C7CC;
      }
    }
  }
</style>